<template>
	<!-- 54是搜索框整体高度  52是tab的整体高度  不展示搜索框时需去除54-->
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt+54+52)+'px'}">
		<!-- 头部 -->
		<c-nav-bar title="我的预约" backUrl="/pagesIndex/parkingService/index"></c-nav-bar>
		<TopTabs :list="tabList" @changeTab="changeTab" :top="mt" :placeholder="'输入订单号'" @sousuo="sousuo"></TopTabs>
		<view class="orders">
			<view v-for="(item,index) in orderList" :key="index">
				<view class="title">
					<text>{{item.numberplate}}</text>
					<text :class="oscConfig[item.paymentType]||'textYwc'">{{ocfg[item.paymentType]}}</text>
				</view>
				<view class="item">
					<text>预约地址</text>
					<text>{{item.nameIsland}}-{{item.parkadeName}}</text>
				</view>
				<view class="item">
					<text>预约时间</text>
					<text>{{item.createOrderTimeMD}} ~ {{item.paymentTimeMD}}</text>
				</view>
				<view class="item">
					<text>总时长</text>
					<text>{{item.reservationOften}}</text>
				</view>
				<view class="item">
					<text>预计花费</text>
					<text>￥{{item.paymentAmount}}</text>
				</view>
				<view class="btns">
					<view @tap.stop="cancelOrder(item)" v-if="item.paymentType==0">取消预约</view>
					<view @tap.stop="refundOrder(item)" v-if="item.paymentType==1">退款</view>
					<view @tap.stop="deleteOrder(item)" v-if="item.paymentType==-1||item.paymentType==-3||item.paymentType==-4||item.paymentType==3">删除预约</view>
					<!-- <view @tap.stop="invoiceOrder(item)" v-if="item.paymentType==3">发票报销</view> -->
					<!-- <view @tap.stop="againBooking(item)" v-if="item.paymentType==-1||item.paymentType==-3||item.paymentType==-4||item.paymentType==3">再次预约</view> -->
					<view @tap.stop="toEdit(item)" v-if="item.paymentType==0">更改</view>
					<view @tap.stop="toPay(item)" v-if="item.paymentType==0" class="btn_blue">去支付</view>
				</view>
			</view>
		</view>
		<view class="tip">{{orderList.length>0?'已显示全部预约':'暂无预约'}}</view>
		<u-toast ref="uToast"></u-toast>
		<WechatPay ref="wxPay" @confirmPay="toConfrimPay"></WechatPay>
	</view>
</template>

<script>
	import WechatPay from '@/compoments/wechatPay/index.vue'
	import TopTabs from '../../compoments/TopTabs/topTabs.vue';
	export default {
		components: {
			TopTabs,
			WechatPay
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
				licence:'',
				tIndex:0,
				tabList: [{
						name: '全部'
					},
					{
						name: '已预约'
					},
					{
						name: '待支付'
					},
					{
						name: '退款/售后'
					}
				],
				orderList: [],
				oscConfig: {
					1: 'textCg',
					0: 'textDzf',
					"-2": 'textYtk',
					"-3": 'textYtk',
					2: 'textYwc'
				},
				pageIndex: 1,
				pageCount: 10,
				isOver: false,
				ocfg: {"0":"待支付","1":"已支付","-1":"已取消","-2":"退款中","-3":"已退款","-4":"已关闭","3":"已完成"},
				orderState: '',
				orderCode:'',
				mysearch:''
			}
		},
		onLoad(option) {
			if(option.licence){
				this.licence = option.licence;
			}
		},
		onShow() {
			this.init();
		},
		onReachBottom() {
			if (this.isOver) return
			this.getList();
		},
		methods: {
			init() {
				this.pageIndex = 1;
				this.isOver = false;
				this.orderList = [];
				this.getList();
			},
			getList(){
				let url = '';
				if(this.tIndex==0) url = `/travel/wisdom/MyReservation/allpage?limit=${this.pageCount}&openId=${JSON.parse(uni.getStorageSync('userInfo')).openId}&page=${this.pageIndex}&orderCode=${this.mysearch}`;
				if(this.tIndex==1) url = `/travel/wisdom/MyReservation/reservation?limit=${this.pageCount}&openId=${JSON.parse(uni.getStorageSync('userInfo')).openId}&page=${this.pageIndex}&type=1&orderCode=${this.mysearch}`;
				if(this.tIndex==2) url = `/travel/wisdom/MyReservation/tobepaid?limit=${this.pageCount}&openId=${JSON.parse(uni.getStorageSync('userInfo')).openId}&page=${this.pageIndex}&paymentType=0&orderCode=${this.mysearch}`;
				if(this.tIndex==3) url = `/travel/wisdom/MyReservation/refundsales?limit=${this.pageCount}&openId=${JSON.parse(uni.getStorageSync('userInfo')).openId}&page=${this.pageIndex}&paymentType=11&orderCode=${this.mysearch}`;
				this.$api.get(url).then(res=>{
					if(res.data.code===0){
						this.pageIndex++;
						let { list, total } = res.data.data;
						if (this.orderList.length + list.length > total || list.length == 0) return this.isOver = true;
						this.orderList = [...this.orderList, ...list];
						this.orderList.forEach(l=>{
							l.createOrderTimeMD = new Date(l.createOrderTime).Format('MM-dd hh:mm');
							l.paymentTimeMD = new Date(l.paymentTime).Format('MM-dd hh:mm');
						})
					}else this.$showModal(res.data.msg);
				})
			},
			sousuo(keyword){
				this.mysearch = keyword;
				this.init();
			},
			changeTab(index) {
				this.tIndex = index;
				this.init();
			},
			//取消预约
			cancelOrder(item){
				this.$api.post('/travel/wisdom/MyReservation/cancelOrder?orderCode='+item.orderCode,{},false).then(res=>{
					if(res.data.code===0){
						this.$showToast('取消成功');
						setTimeout(()=>{
							this.init();
						},1500)
					}else this.$showModal(res.data.msg);
				})
			},
			//退款
			refundOrder(item){
				this.$api.post('/travel/wisdom/MyReservation/requestArefund?orderCode='+item.orderCode,{},false).then(res=>{
					if(res.data.code===0){
						this.$api.post('/order/icbc/refund',res.data.data).then(result=>{
							if (result.statusCode === 200) {
								this.$showToast('退款成功');
								setTimeout(()=>{
									this.init();
								},1500)
							}else that.$showToast(result.data.msg);
						})
					}else this.$showModal(res.data.msg);
				})
			},
			//删除订单
			deleteOrder(item){
				this.$api.post('/travel/wisdom/MyReservation/putOrderCode?orderCode='+item.orderCode,{},false).then(res=>{
					if(res.data.code===0){
						this.$showToast('删除成功');
						setTimeout(()=>{
							this.init();
						},1500)
					}else this.$showModal(res.data.msg);
				})
			},
			//发票报销
			invoiceOrder(item){
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			//再次预订
			againBooking(item){
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			//更改
			toEdit(item){
				uni.navigateTo({
					url:'/pagesIndex/parkingService/fillInformation?editInfo='+encodeURIComponent(JSON.stringify(item))
				})
			},
			//去支付
			toPay(item){
				this.$refs.wxPay.payShow = true;
				this.orderCode = item.orderCode;
			},
			toConfrimPay(){
				this.$api.post('/order/icbc/createOrder',{
					orderCode:this.orderCode,
					tradeType:'JSAPI',
					openId:JSON.parse(uni.getStorageSync('userInfo')).openId
				},false).then(res=>{
					if(res.statusCode==200&&res.data!=null){
						this.$refs.wxPay.payShow = false;
						this.$wxPay(res.data).then(result=>{
							this.$showToast('支付成功');
							setTimeout(()=>{
								this.init();
							},1500)
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F5F8FA;
		padding: 100rpx 0 1rpx;
		
		.orders{
			display: flex;
			flex-direction: column;
			align-items: center;
		
			&>view{
				width: calc(100% - 48rpx);
				padding: 20rpx 24rpx 27rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
				
				&>view{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.title{
					font-family: PingFang SC;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid rgba(112, 112, 112, .1);
					margin-bottom: 8rpx;
					text{
						&:first-child{
							font-size: 36rpx;
							font-weight: bold;
							color: #333333;
							letter-spacing: 2rpx;
						}
						&:last-child{
							font-size: 28rpx;
							font-weight: 400;
						}
						&.succ{
							color: #007A69;
						}
						&.fail{
							color: #ff0000;
						}
					}
				}
				.item{
					margin-top: 22rpx;
					text{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						&:last-child{
							color: #333333;
						}
					}
				}

				.btns {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					border-top: 1rpx solid #EFEFEF;
					margin-top: 24rpx;

					&>view {
						margin: 24rpx 0 0 24rpx;
						width: 148rpx;
						height: 56rpx;
						border: 1rpx solid #EFEFEF;
						border-radius: 28rpx;
						line-height: 56rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;

						&.btn_blue {
							border: 1rpx solid #007A69;
							color: #007A69;
						}
					}
				}

				&.qx {
					text {
						color: #AAAAAA !important;
					}
				}
			}
		}
		
		.tip {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
			line-height: 33rpx;
			margin: 56rpx 0;
		}
		
		.textCg {
			color: #007A69;
		}
		
		.textDzf {
			color: #FE401A;
		}
		
		.textYtk {
			color: #AAAAAA;
		}
		
		.textYwc {
			color: #000000;
		}
	}
</style>